<template>
  <base-module
    class="overview-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <echarts-base :options="typeOptions"></echarts-base>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import echartsBase from '@/components/echarts/base';

export default {
  name: 'QualityComp',
  props: {
    title: {
      type: [String, Object],
      default: '质量整改'
    },
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      typeEchartsData: {
        legend: [],
        data: []
      },
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    typeOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: this.typeEchartsData.legend,
          bottom: 0,
          // left: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '质量整改统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '45%'],
            label: {
              color: '#fff',
              formatter: '{b}: {d}%'
            },
            data: this.typeEchartsData.data,
            // itemStyle: {
            //   color: 'rgb(85, 201, 246)'
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
  },
  created() {
    // this.getQualityLevelList();
    this.getQualityStateList();
  },
  components: {
    BaseModule,
    echartsBase
  },
  methods: {
    // 获取类型数量
    // async getQualityLevelList() {
    //   const { success, data: { data }} = await this.$Model.getQualityLevelList({
    //     projectId: this.projectId,
    //     type: '2',
    //     queryTime: this.$moment().format('yyyy')
    //   });
    //   if (success && data) {
    //     this.setTypeList(data);
    //   }
    // },
    // 按周获取整改统计数据
    async getQualityStateList() {
      const { success, data: { data }} = await this.$Model.getQualityStateList({
        type: '2',
        queryTime: this.$moment().format('yyyy'),
        projectId: this.projectId
      });
      if (success && Array.isArray(data)) {
        this.setTypeList(data);
      }
    },
    /**
     * 设置安全类型占比图表数据
     * @param data {Array}
     */
    setTypeList(data) {
      const result = {
        legend: [],
        data: []
      };
      data && data.forEach(item => {
        const { stateList = [] } = item;
        stateList && stateList.forEach(val => {
          const { stateName, num } = val;
          const currentItem = result.data.find(v => v.name === stateName);
          const levelNum = isNaN(num) ? 0 : Number(num);
          if (currentItem) {
            currentItem.value += levelNum;
            return;
          }
          result.data.push({
            name: stateName,
            value: levelNum
          });
        });
      });
      result.legend = result.data.map(item => item.name);
      this.typeEchartsData = result;
    },
    handleClick() {
      this.$router.push('/quality/inspection');
    }
  }
};
</script>

<style scoped lang="scss">
  .overview-comp {
    .list-container {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      overflow-y: auto;
      .list-item {
        float: left;
        display: flex;
        align-items: flex-start;
        justify-content: left;
        color: rgba(179, 189, 248, .6);
        min-height: 33px;
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        border-bottom: 1px solid rgba(45, 56, 123, .2);
        overflow: hidden;
        .list-item-label {
          margin-right: 20px;
          width: 100px;
          min-height: 33px;
          display: flex;
          align-items: center;
        }
        .list-item-text {
          color: #fff;
          width: calc(100% - 100px);
          min-height: 33px;
          display: flex;
          line-height: 25px;
          align-items: center;
        }
      }
    }
  }
</style>
